<template>
    <div>
        <el-card>
            <el-page-header content="新闻列表" icon="" title="新闻管理"></el-page-header>
        </el-card>
        <el-card>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="title" label="新闻标题" />
                <el-table-column prop="category" label="新闻分类">
                    <template #default="scope">
                        {{ categoryFormat(scope.row.category) }}
                    </template>
                </el-table-column>
                <el-table-column prop="editTime" label="更新时间">
                    <template #default="scope">
                        {{ timeFormat.getTime(scope.row.editTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="author" label="作者">
                </el-table-column>
                <el-table-column prop="publish" label="是否发布">
                    <template #default="scope">
                        <el-switch v-model="scope.row.publish" :active-value="1" :inactive-value="0"
                            @change="publishChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" type="success" circle :icon="Star"
                            @click="handlePreview(scope.row)"></el-button>
                        <el-button size="small" type="primary" circle :icon="Edit"
                            @click="handleEdit(scope.row)"></el-button>
                        <el-popconfirm title="你确认删除吗？" confirmButtonText="确定" cancelButtonText="取消"
                            @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button size="small" type="danger" circle :icon="Delete"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>

            </el-table>
        </el-card>
        <el-dialog v-model="dialogVisible" title="预览新闻" width="50%">
            <div>
                <h2>{{ previewData.title }}</h2>
                <div style="font-size: 12px;color: gray;margin-top: 10px;">作者：{{ previewData.author }} </div>
                <div style="font-size: 12px;color: gray;">最后编辑时间：{{ timeFormat.getTime(previewData.editTime) }}
                </div>
                <!-- 分割线 -->
                <el-divider>
                    <el-icon><star-filled /></el-icon>
                </el-divider>
                <div class="preview" v-html="previewData.content"></div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { Star, Edit, Delete, StarFilled } from "@element-plus/icons-vue";

import axios from 'axios';
import timeFormat from '@/util/timeFormat'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
const tableData = ref([])
const previewData = ref({})
const dialogVisible = ref(false)
const author = store.state.userInfo.username
onMounted(() => {
    getTableData()
})

const getTableData = async () => {
    const res = await axios.get(`/adminapi/news/list/author/${author}`)
    // console.log(res.data);
    tableData.value = res.data.data
    // console.log(tableData);
}

// 格式化其实也就是用一个数组，返回数组下标
const categoryFormat = (category) => {
    const arr = ["最新动态", "典型案例", "通知公告"]
    return arr[category - 1]
}
// 是否发布的回调函数
const publishChange = async (item) => {
    // console.log(item);
    const result = await axios.put(`/adminapi/news/publish`, { _id: item._id, publish: item.publish })
    // console.log(result);
    if (result.data.ActionType === 'OK') {
        ElMessage.success("更新新闻发布状态成功")
        await getTableData()
    } else {
        ElMessage.error(result.data.errorMsg)
    }

}
// 预览的回调函数
const handlePreview = (data) => {
    // console.log(data);
    previewData.value = data
    // console.log(previewData);
    dialogVisible.value = true

}
// 删除的回调函数
const handleDelete = async (item) => {
    // console.log(item);
    const result = await axios.delete(`/adminapi/news/list/${item._id}`)
    // console.log(result);
    if (result.data.ActionType === 'OK') {
        ElMessage.success("删除新闻成功")
        await getTableData()
    } else {
        ElMessage.error(result.data.errorMsg)
    }

}
// 编辑的回调函数
const handleEdit = (item) => {
    router.push(`/news-manage/editnews/${item._id}`)
}
</script>


<style scoped lang="scss">
:deep(.preview) {
    table {
        border: 1px solid #ccc;

        th,
        td {
            border: 1px solid #ccc;
            text-align: center;
            padding: 5px 5px;
        }
    }

    img {
        max-width: 100%;
    }
}
</style>